<template>
  <div class="app-container">
    <!--查询-->
    <div class="query">
      <el-form :inline="true" :model="queryparam" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="queryparam.username" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addUserOpen">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--表格-->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">{{ scope.row.username }}</template>
      </el-table-column>
      <el-table-column label="昵称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template slot-scope="scope">{{ scope.row.cellphone }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="modopen(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="pagesize"
      :page-sizes="[5,10,50,100]"
      layout="total, sizes,prev, pager, next"
      :total="total"
    ></el-pagination>
    <!--添加-->

    <el-dialog title="添加用户" :visible.sync="addVisible">
      <el-form :model="addparam" ref="addfrom">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="addparam.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input v-model="addparam.nickname" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="addparam.cellphone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="addparam.password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="选择角色" :label-width="formLabelWidth">
          <el-select v-model="addparam.roleid" filterable placeholder="请选择">
            <el-option v-for="role in roles" :key="role.id" :label="role.rolename" :value="role.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="closeAdd">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </div>
    </el-dialog>

    <!--修改-->

    <el-dialog title="修改用户" :visible.sync="modVisible">
      <el-form :model="modparam" ref="modfrom">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="modparam.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input v-model="modparam.nickname" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="modparam.cellphone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="modparam.password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="选择角色" :label-width="formLabelWidth">
          <el-select v-model="modparam.roleid" filterable placeholder="请选择">
            <el-option v-for="role in roles" :key="role.id" :label="role.rolename" :value="role.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="modclose">取 消</el-button>
        <el-button type="primary" @click="modsub">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryid, mod, del, add, list } from "@/api/user";
import { all } from "@/api/role";

export default {
  data() {
    return {
      list: null,
      listLoading: false,
      formLabelWidth: "120px",
      queryparam: {
        pagesize: 5,
        pagenum: 1,
        username: ""
      },
      addVisible: false,
      addparam: {
        username: "",
        cellphone: "",
        nickname: "",
        password: "",
        roleid: ""
      },
      pagesize: 5,
      pagenum: 1,
      total: 0,
      roles: [],
      //修改
      modVisible: false,
      modparam: {
        id: "",
        username: "",
        cellphone: "",
        nickname: "",
        password: "",
        roleid: ""
      }
    };
  },
  created() {
    this.fetchData();
  },
  //方法定义
  methods: {
    //属性数据
    fetchData() {
      this.listLoading = true;
      list(this.queryparam).then(response => {
        this.list = response.data.list;
        this.total = response.data.totalsize;
        this.listLoading = false;
      });
    },

    handleSizeChange(val) {
      this.pagenum = 1;
      this.pagesize = val;
      this.queryparam.pagesize = val;
      this.fetchData();
    },

    handleCurrentChange(val) {
      this.pagenum = val;
      this.queryparam.pagenum = val;
      this.fetchData();
    },
    addUserOpen() {
      this.addVisible = true;
      all().then(response => {
        this.addVisible = true;
        this.roles = response.data;
      });
    },
    addUser() {
      add(this.addparam).then(response => {
        this.pagenum = 1;
        this.fetchData();
        this.closeAdd();
      });
    },
    closeAdd() {
      this.$refs.addfrom.resetFields();
      this.addVisible = false;
    },
    handleDelete(row) {
      this.$confirm("确定删除用户" + row.username, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          del({ id: row.id }).then(response => {
            this.pagenum = 1;
            this.fetchData();
            this.addVisible = false;
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    modopen(row) {
      queryid({ id: row.id }).then(response => {
        this.modparam = response.data;
        all().then(response => {
          this.modVisible = true;
          this.roles = response.data;
        });
      });
    },
    modclose() {
      this.modVisible = false;
      this.$refs.modfrom.resetFields();
    },
    modsub() {
      mod(this.modparam).then(response => {
        this.pagenum = 1;
        this.modclose();
        this.fetchData();
      });
    }
  }
};
</script>

<style lang="scss">
.el-pagination {
  margin-top: 10px;
  float: right;
}
.query {
  margin-top: 10px;
  float: right;
}
</style>
